<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" href="css/login.css">
    <script src="js/jquery-2.1.1.min.js"></script>
    <link rel="stylesheet" href="static/images">
    <script src="js/hit.js" type="text/javascript"></script>
    <script>
        function  mylogin(){
            //获取用户输入的登录名字和密码
            var myname= $("#myname").val();
            var mypwd=$("#mypwd").val();
            if(myname=='') alert("用户名不得为空");
            if(mypwd=='') alert("密码不得为空");
            $.ajax({
                url: "http://localhost:8088/UniverseFarmBack/Login.do",
                dataType:"json",
                data:{name:myname,pwd:mypwd},
                type:"get",
                xhrFields: {                               //保存session在跨域访问中不会丢失！！！
                    withCredentials: true
                },
                crossDomain: true,
                success:function(result){
                    if(result.flag==0){
                        alert(result.msg);
                    }else if(result.flag==1){
                        alert(result.msg);
                    }else if(result.flag==2){
                        //登录成功
                        alert(result.msg);
                        //跳转到index.html
                        location.href="index.html";
                    }
                }
            });



        }
    </script>
    <script>
        function  myregister(){
            //获取用户输入的登录名字和密码
            var accountname= $("#accountname").val();
            var password=$("#password").val();
            var password2=$("#password2").val();
            var name=$("#name").val();
            var phone=$("#phone").val();

            if(accountname==''){
                alert("用户名不得为空");
                return;
            }
            if(phone==''){
                alert("电话不得为空");
                return;
            }
            if(password==''){
                alert("密码不得为空");
                return;
            }
            if(password!=password2){
                alert("两次密码输入不一致，请重新输入");
                return;
            }
            $.ajax({
                url: "http://localhost:8088/UniverseFarmBack/register.do",
                dataType:"json",
                data:{
                    account:accountname,
                    pwd:password,
                    name:name,
                    phone:phone
                },
                type:"get",
                xhrFields: {                               //保存session在跨域访问中不会丢失！！！
                    withCredentials: true
                },
                crossDomain: true,
                success:function(result){
                    if(result.flag==0){
                        alert(result.msg);
                    }
                    else{
                        alert(result.msg);
                        //跳转到登录页面进行登录
                        location.href='login.html';
                    }
                }


            });
        }
    </script>
</head>
<body>
<p style="font-size: 30px ;color: #00AA86;font-weight: bolder;">Universe Farm</p>
<div class="container" id="container">
    <div class="form-container sign-up-container">
        <form action="#">
            <h1>注册账号</h1>
            <!-- <div class="social-container">
            <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
            <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
            <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
            </div> -->
            <!-- <span>or use your email for registration</span> -->
            <br>
            <input id="name" type="text" placeholder="昵称" />
            <input id="phone" type="text" placeholder="电话号码" />
            <input id="accountname" type="text" placeholder="用户名" />
            <input id="password" type="password" placeholder="密码" />
            <input id="password2" type="password" placeholder="确认密码" />
            <span class="hidden" id="success-sign-up">succeed!</span>
            <button id="accountSignUp" onclick="myregister()">Sign Up</button>
        </form>
    </div>
    <div class="form-container sign-in-container">
        <form action="#">
            <h1>登录</h1>
            <!-- <div class="social-container">
            <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
            <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
            <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
            </div> -->
            <!-- <span>or use your account</span> -->
            <br>
            <input id="myname" type="text" placeholder="用户名" />
            <input id="mypwd" type="password" placeholder="请输入密码" />
            <span class="hidden" id="success-sign-in">登录成功</span>
            <span class="hidden" id="fail-sign-in">登陆失败</span>
            <!-- <a href="#">Forgot your password?</a> -->
            <br>
            <button type="button" id="accountSignIn" onclick="mylogin()">登录</button>
        </form>
    </div>
    <div class="overlay-container">
        <div class="overlay">
            <div class="overlay-panel overlay-left">
                <h1>欢迎回来！</h1>
                <p>请使用您的个人信息登录，保持与我们的联系</p>
                <button type="button" class="ghost" id="signIn">登录</button>
            </div>
            <div class="overlay-panel overlay-right">
                <h1>你好，新朋友!</h1>
                <p>输入您的个人详细信息，与我们一起开始旅程</p>
                <button class="ghost" id="signUp">注册</button>
            </div>
        </div>
    </div>
</div>

<script async src="js/login.js"></script>
</body>